<template>
  <section class="left-menu mobile" :class="menuServie.close.value ? 'close' : ''">
    <div class="admin-title">
      <i class="mr-1 fas fa-closed-captioning"></i>
      <span class="hidden-text">百氚东倒海</span>
    </div>
    <div class="side-bar">
      <dl v-for="menu of menuServie.menus.value" :key="menu.title">
        <dt :class="{ 'parent-active': menu.active }" class="parent-menu" @click="handle(menu)">
          <section>
            <i :class="menu.icon"></i>
            <span class="ml-2 hidden-text">{{ menu.title }}</span>
          </section>
          <section v-show="menu.children?.length">
            <i class="duration-500 hidden-text fa fa-angle-down" :class="{ 'rotate-180': menu.active }"></i>
          </section>
        </dt>
        <dd :class="!menu.active || menuServie.close.value ? 'hidden' : 'block'">
          <section
            v-for="child of menu.children"
            :key="child.title"
            :class="{ 'child-active': child.active }"
            class="child-menu"
            @click="handle(menu, child)">
            <i :class="child.icon"></i>
            <span class="ml-2 hidden-text">{{ child.title }}</span>
          </section>
        </dd>
      </dl>
    </div>
  </section>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import type { MenuType } from '@/types/menu';
import menuServie from '@/hooks/useMenus';

const router = useRouter();

// 重置菜单
const resetMenus = () => {
  // 递归重置
  const fn = (menu: MenuType.Menu) => {
    menu.active = false;
    menu.children?.forEach(fn);
  };
  menuServie.menus.value.forEach(fn);
};

// 跳转菜单
const handleMenu = (menu: MenuType.Menu) => {
  if (menu.link) {
    router.push(menu.link);
  }
};

// 处理菜单点击事件的函数
const handle = (pmenu: MenuType.Menu, cmenu?: MenuType.Menu) => {
  // 如果再次点击已展开的父级菜单，则关闭该父级菜单
  if (pmenu.active && !cmenu) {
    pmenu.active = false;
    return;
  }

  // 重置所有菜单的激活状态
  resetMenus();

  // 激活父菜单并跳转
  pmenu.active = true;
  handleMenu(pmenu);

  // 如果有子菜单，也激活并跳转
  if (cmenu) {
    cmenu.active = true;
    handleMenu(cmenu);
  }
};
</script>

<style scoped lang="scss">
.left-menu {
  transition: all 0.5s;
  @apply w-[200px] bg-[#2f4058] p-2 m-1 rounded-md;

  .admin-title {
    @apply h-10  leading-10 text-[#ccc]  text-center text-[18px];
  }
  .side-bar {
    @apply text-sm text-white;
    height: calc(100% - 40px);
    /* 宽度 */
    &::-webkit-scrollbar {
      width: 0px;
    }
    dl {
      @apply relative;
      .parent-menu {
        @apply flex justify-between p-2 m-1 mt-2 rounded-sm cursor-pointer;
      }
      .child-menu {
        @apply p-2 m-2 duration-300 rounded-sm cursor-pointer hover:bg-slate-500;
      }
    }
    .parent-active {
      transition: width 0.3s;
      @apply text-sky-600;
    }
    .child-active {
      @apply bg-slate-500 text-sky-300;
    }
  }

  &.close {
    @apply w-[50px];
    .hidden-text {
      @apply hidden;
    }
    .side-bar {
      @apply relative;
      .parent-menu {
        @apply m-0;
      }
      .child-menu {
        @apply m-1;
      }
      dl:hover {
        dd {
          display: block !important;
          z-index: 999;
          @apply absolute left-full top-2 bg-[#2f4058] opacity-90 w-[200px];
          .hidden-text {
            @apply inline-block;
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    &.mobile {
      @apply w-[160px];
      .side-bar {
        .parent-menu {
          @apply m-0;
        }
        .child-menu {
          @apply m-0;
        }
      }
      &.close {
        display: none;
      }
    }
  }
}
</style>
